<style lang="less" scoped>
#newList-page {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  min-width: 1200px;

  .apply {
    width: 100%;
    padding: 20px;

    .title {
      text-align: center;
    }
// /deep/ 深度作用选择器，在scope状态下修改ele样式
    .form-box {
      width: 1200px;
      // height: 100%;
      margin: 0 auto;

      .mb10 {
        margin-bottom: 10px;
      }

      & /deep/ .el-radio__label {
        font-size: 18px;
      }

      .flex-box {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
          .el-form-item {
          width: 350px;
          
          & /deep/ .el-form-item__label {
            width: 95px;
            font-size: 18px;
          }

          & /deep/ .el-input, & /deep/ .el-select {
            width: 250px;
          }

          & /deep/ .el-form-item__error {
            padding-top: 10px;
            left: 28%;
          }
        }

        .item-flex {
          & /deep/ .el-form-item__label {
            margin-right: 20px;
          }

          & /deep/ .el-form-item__content {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;

            .el-input__inner {
              width: 200px;
            }

            .el-input + .el-input {
              margin-left: 30px;
            }
          }
        }

        .assign {
          width: 500px;
        }

        .assign-addr {
          width: 555px;
        }


      }

      .radio-box {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        border-top: 1px solid #d8dce5;
        border-bottom: 1px solid #d8dce5;
        margin: 10px auto 25px;        
        .el-form-item {
          width: 400px;

          & /deep/ .el-form-item__label {
            width: 210px;
          }
        }
      }

      .internship-box {
        & /deep/ .el-form-item {
          width: 380px;

          .el-form-item__label {
            width: 132px;
          }

          .el-input {
            width: 246px;
          }
        }

        & /deep/ .el-form-item:last-child {
          width: 750px;
          
          .el-input {
            width: 616px;
          }
        }
      }

      .service-box {
        margin: 10px auto 25px;
        border-top: 1px solid #d8dce5;
        border-bottom: 1px solid #d8dce5;

        p {
          text-align: cente;
          margin: 10px auto;
        }

        .title {
          position: relative;
          font-size: 22px;

          &::before {
            content: '*';
            display: block;
            position: absolute;
            color: #fa5555;
            left: -13px;
          }
        }

        & /deep/ .el-radio {
          display: block;
          margin-left: 0;
          text-align: left;
          margin-bottom: 10px;
        }
      }
      
      .note-box {
        margin-bottom: 20px;

        & /deep/ .el-form-item__label {
          font-size: 18px;
        }
      }

      .button-box {
        .btn-left {
          margin-left: 50px;
        }
      }
    }
  }
}
</style>

<template>
  <div id="newList-page">
    <!-- <Top/> -->
    <Side/>
    <div class="apply">
      <h2 class="title">提交表单申请</h2>
      <el-form :model="formData" :rules="rules" class="form-box">
        <div class="flex-box mb10">
          <el-form-item label="负责人" prop="name">
            <el-input v-model="formData.name" placeholder="请输入负责人姓名"></el-input>
          </el-form-item>
          <el-form-item label="使用部门" prop="department">
            <el-input v-model="formData.department" placeholder="请输入使用部门"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="tel">
            <el-input v-model="formData.tel" placeholder="请输入负责人联系方式"></el-input>
          </el-form-item>
        </div>
        <div class="flex-box mb10">
          <el-form-item label="总人数" prop="pNumber">
            <el-input v-model="formData.pNumber" placeholder="请输入总人数"></el-input>
          </el-form-item>
          <el-form-item label="使用班级" prop="class">
            <el-input v-model="formData.class" placeholder="请输入使用班级"></el-input>
          </el-form-item>
          <el-form-item label="客车用途" prop="purpose">
            <el-select v-model="formData.purpose" placeholder="请选择客车用途">
              <el-option label="实习" value="internship"></el-option>
              <el-option label="活动" value="active"></el-option>
              <el-option label="其他" value="other"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex-box">
          <el-form-item label="用车数量" prop="cNumber">
            <el-input v-model="formData.cNumber" placeholder="请输入总用车数量"></el-input>
          </el-form-item>
          <el-form-item label="47座">
            <el-input v-model="formData.foNumber" placeholder="请输入47座车的数量"></el-input>
          </el-form-item>
          <el-form-item label="36座">
            <el-input v-model="formData.thNumber" placeholder="请输入36座车的数量"></el-input>
          </el-form-item>
        </div>
        <div class="flex-box radio-box">
          <div>
            <p>用车路线</p>
            <el-form-item label="开发区校区至金石滩校区">
              <el-radio-group v-model="formData.routeOne">
                <el-radio label="o1">单程</el-radio>
                <el-radio label="o2">往返</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div>
            <p>用车路线</p>
            <el-form-item label="开发区校区至双D港校区">
              <el-radio-group v-model="formData.routeTwo">
                <el-radio label="t1">单程</el-radio>
                <el-radio label="t2">往返</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div class="flex-box">
          <el-form-item label="活动时间" required class="assign">
             <el-date-picker
              v-model="formData.date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="其他路线" class="item-flex assign-addr">
            <el-input :span='5' v-model="formData.startAddr" placeholder="起点(没有可不填)"></el-input>
            <el-input v-model="formData.endAddr" placeholder="终点(没有可不填)"></el-input>
          </el-form-item>
        </div>
        <div class="flex-box internship-box">
          <el-form-item label="实习(参观)单位">
            <el-input v-model="formData.unit" placeholder="若没有可不填"></el-input>
          </el-form-item>
          <el-form-item label="实习(参观)内容">
            <el-input v-model="formData.content" placeholder="若没有可不填"></el-input>
          </el-form-item>
        </div>
        <div class="service-box">
          <p><span class="title">服务商</span></p>
          <el-form-item>
            <el-radio-group v-model="formData.service">
              <el-radio label="s1">大连金隆汽车客运服务有限公司 &nbsp; 联系人：王先生 &nbsp; 电话：15566910222</el-radio>
              <el-radio label="s2">金钟租赁（大连）有限公司 &nbsp; 联系人：林先生 &nbsp; 电话：13889692518</el-radio>
              <el-radio label="s3">大连龙源汽车服务有限公司 &nbsp; 联系人：杨先生 &nbsp; 电话：18940862111</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="note-box">
          <el-form-item label="备注">
            <el-input type="textarea" 
              :autosize="{ minRows: 2, maxRows: 3 }"
              placeholder="请输入内容(没有可不填)"
              v-model="formData.textarea">
            </el-input>
          </el-form-item> 
        </div>
        <div class="button-box">
          <el-form-item>
            <el-button @click="resetForm('formData')">重置</el-button>
            <el-button class="btn-left" type="primary" @click="submitForm('formData')">立即创建</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  // import store from '../store/store'
  // import {mapState} from 'vuex'

  export default {
    data () {
      return {
        formData: {
          name: '',
          department: '',
          tel: '',
          pNumber: '',
          class: '',
          purpose: '',
          cNumber: 0,
          foNumber: 0,
          thNumber: 0,
          routeOne: '',
          routeTwo: '',
          data1: '',
          date2: '',
          unit: '',
          content: '',
          service: '',
          textarea: ''
        },
        rules: {
          name: [
            { required: true, message: '负责人不能为空', trigger: 'blur' }
          ],
          department: [
            { required: true, message: '使用部门不能为空', trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '联系方式不能为空', trigger: 'blur' }
          ],
          pNumber: [
            { required: true, message: '总人数不能为空', triggle: 'blur' }
          ],
          class: [
            { required: true, message: '使用班级不能为空', triggle: 'blur' }
          ],
          purpose: [
            { required: true, message: '请选择客车用途', triggle: 'change' }
          ],
          cNumber: [
            { required: true, message: '请选择总用车数量', triggle: 'blur' }
          ],
          foNumber: [
            { required: true, message: '请选择47座车的数量', triggle: 'blur' }
          ],
          thNumber: [
            { required: true, message: '请选择36座车的数量', triggle: 'blur' }
          ]
        }
      }
    },
    methods: {
      resetForm (value) {
      },
      submitForm (value) {
      }
    },
    created () {

    },
    beforeMounte () {

    }
  }
</script>